import React, { PureComponent } from 'react';
import {
  Icon,
  Upload,
  notification,
} from 'antd';
import QiniuUploader from '../../utils/qiniu';
import G from '../../utils/g';

const uploadButton = (
  <div>
    <Icon type="plus" />
    <div className="ant-upload-text">Upload</div>
  </div>
);

export default class Uploader extends PureComponent {
  state = {
    fileList : this.props.fileList || [
      // {
      // uid: -1,
      // name: 'xxx.png',
      // status: 'done',
      // url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      // }
    ]
  };

  componentWillReceiveProps = (props)=>{
    //console.log(props);
    // if(props.clear){  //是否清空
    //   this.setState({
    //     fileList : []
    //   });
    // }

    // if(props.fileList && props.fileList.length > 0 && this.state.fileList.length == 0){
    //   this.setState({
    //     fileList : props.fileList
    //   });
    // }
  };

  beforeUpload = (file, fileLists)=>{
    const { uptoken, onChange  } = this.props;
    let fileList = [...this.state.fileList];
    let uploadPromise = function(fileItem){
      return new Promise((resolve, reject)=>{
        QiniuUploader({
          file : fileItem ,
          uptoken,
          success : (url)=>{
            G.preloadImg(url,function(){

              console.log(`${url}?_w=${this.width}&_h=${this.height}`);

              resolve({
                uid: G.uuid(16),
                name: file.name,
                status: 'done',
                url: `${url}`
              });
            });
            
          },
          error : (err)=>{
            reject(err);
          }
        });
      });
    };
    let uploadArr = fileLists.map(v=>{
      return uploadPromise(v);
    });

    Promise.all(uploadArr).then(result=>{
      result.forEach(v=>{
        fileList.push(v);
      });
      this.setState({
        fileList
      });
      typeof onChange == 'function' && onChange(fileList);
      //console.log(result);
    }).catch(err=>{
      console.log(err);
    });

    // QiniuUploader({
    //   file ,
    //   uptoken,
    //   success : (url)=>{
    //     fileList.unshift({
    //       uid: G.uuid(16),
    //       name: file.name,
    //       status: 'done',
    //       url: url,
    //     });
    //     this.setState({
    //       fileList
    //     });
    //     typeof onChange == 'function' && onChange(fileList);
    //   }
    // });

    return false;
  };

  handleUploadChange = (ret,fileList)=> {
    // this.setState({fileList});
    // this.props.onChange(fileList);
  };

  handleUpload = (upload)=>{  //自定义上传
      console.log(upload);
      const { uptoken, onChange  } = this.props;
      QiniuUploader({
        file : upload.file ,
        uptoken,
        success : (url)=>{
          G.preloadImg(url,(width,height)=>{

            console.log(`${url}?_w=${width}&_h=${height}`);
            const file = {
              uid: G.uuid(16),
              name: upload.file.name,
              status: 'done',
              url: `${url}?_w=${width}&_h=${height}`,
            };
            
            console.log(this.state.fileList);
            let fileList = [...this.state.fileList];
            fileList.push(file);
            this.setState({
              fileList
            });
            typeof onChange == 'function' && onChange(fileList);
            upload.onSuccess(file);
            //resolve();
          });
          
        },
        error : (err)=>{
          console.log(err);
        }
      });
  }

  render(){
    const { fileList } = this.state;
    const length = this.props.length || 1;
    return <Upload
      multiple = {true}
      name="avatar"
      accept="image/*"
      listType="picture-card"
      className="avatar-uploader"
      fileList={fileList}
      showUploadList={true}
      action="/"
      customRequest = {this.handleUpload}
      onChange={this.handleUploadChange}
    >
      {fileList.length >= length ? null : uploadButton}
    </Upload>
  }
}
